<template>
  <mu-container>
    <mu-tabs :value.sync="active" center color="teal">
      <mu-tab> <mu-icon value="person"></mu-icon>登录 </mu-tab>
      <mu-tab> <mu-icon value="person_add"></mu-icon>注册 </mu-tab>
    </mu-tabs>
    <div class="demo-text" v-if="active === 0">
      <!-- 1.登录窗口 -->
      <mu-form ref="form" :model="user" class="mu-demo-form">
        <mu-form-item label="用户名" prop="userName" :rules="usernameRules">
          <mu-text-field
            v-model="user.userName"
            prop="userName"
          ></mu-text-field>
        </mu-form-item>
        <mu-form-item label="密码" prop="password" :rules="passwordRules">
          <mu-text-field
            type="password"
            v-model="user.password"
            prop="password"
          ></mu-text-field>
        </mu-form-item>
        <!-- 是否管理员 -->
        <mu-form-item prop="admin" label>
          <mu-switch v-model="user.admin"></mu-switch>
          <span>管理员</span>
        </mu-form-item>
        <mu-form-item>
          <mu-button color="primary" @click="submitLogin()">提交</mu-button>
          <mu-button @click="clear">重置</mu-button>
        </mu-form-item>
      </mu-form>
    </div>
    <div class="demo-text" v-if="active === 1">
      <!-- 2.注册窗口 -->
      <mu-form ref="form" :model="user" class="mu-demo-form">
        <mu-form-item label="用户名" prop="userName" :rules="usernameRules">
          <mu-text-field
            v-model="user.userName"
            prop="userName"
          ></mu-text-field>
        </mu-form-item>
        <mu-form-item label="设置密码" prop="password" :rules="passwordRules">
          <mu-text-field
            type="password"
            v-model="user.password"
            prop="password"
          ></mu-text-field>
        </mu-form-item>
        <mu-form-item label="邮箱" prop="email" :rules="emailRules">
          <mu-text-field v-model="user.email" prop="email"></mu-text-field>
        </mu-form-item>
        <mu-form-item>
          <mu-button color="primary" @click="submitRegister">提交</mu-button>
          <mu-button @click="clear">重置</mu-button>
        </mu-form-item>
      </mu-form>
    </div>
  </mu-container>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      active: 0,
      usernameRules: [
        { validate: (val) => !!val, message: "必须填写用户名" },
        { validate: (val) => val.length >= 2, message: "用户名长度大于2" },
      ],
      passwordRules: [
        { validate: (val) => !!val, message: "必须填写密码" },
        {
          validate: (val) => val.length >= 3 && val.length <= 10,
          message: "密码长度大于3小于10",
        },
      ],
      emailRules: [
        { validate: (val) => !!val, message: "必须填写邮箱" },
        {
          validate: (val) =>
            /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(
              val
            ),
          message: "输入有效的邮箱",
        },
      ],
      user: {
        admin: true,
        userName: "admin",
        password: "123456",
        email: "hb.zzx@qq.com",
      },
    };
  },
  methods: {
    // 提交登录
    submitLogin() {
      this.$refs.form.validate().then((result) => {
        // console.log(result);
        if (result) {
          this.$axios({
            method: "post",
            url: "/user/userLogin",
            params: null,
            data: {
              userName: this.user.userName,
              password: this.user.password,
            },
          })
            .then((res) => {
              // console.log(res.data);
              let resData = res.data;
              if (resData.code === 200) {
                // 存储数据到 Local Storage
                // console.log(resData.data.user)
                this.$toast.success("登陆成功！欢迎您：" + resData.data.user.userName);
                localStorage.setItem("user", JSON.stringify(resData.data.user));
                this.$parent.showNav = true;
                this.$router.push({ path: "/goodsList" });
              }
              else
              {
                this.$toast.error("账号或密码错误，请重试！")
              }
            })
            .catch((err) => {
              console.log(err);
            });
        }
      });
    },
    // 提交注册账号
    submitRegister() {
      this.$refs.form.validate().then((result) => {
        if (result) {
          axios.post("/api/registerUser", this.user).then((res) => {
            console.log("输出response.data", res.data);
            // 后台校验用户名是否存在
            this.active = 0;
          });
        }
      });
    },

    clear() {
      this.$refs.form.clear();
      this.user = {
        username: "",
        password: "",
        email: "",
      };
    },
  },
};
</script>

<style lang="less">
.mu-demo-form {
  width: 100%;
  max-width: 460px;
}
.mu-form-item-label {
  font-size: 16px;
  line-height: 28px;
  text-align: left;
  font-weight: 600;
}
.demo-text {
  padding: 16px;
  background: #fff;
  p {
    margin: 8px 0;
  }
}
</style>